<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <view class="pay-mode-hd">
      <view class="icon">
        <image src="/static/image/icon-wepay.png" style="width: 42rpx;height: 34rpx;" />
      </view>
      <text class="name">微信收款</text>
    </view>
    <view class="pay-mode-item">
      <template v-if=" gStore?.wepayInfo?.accountNo">
        <text class="name">{{ gStore?.wepayInfo.accountNo}}({{ gStore?.wepayInfo.name}}）</text>
      </template>
      <template v-else>
        <text class="name"></text>
      </template>
      <view class="arrow" @click="openRoutePath('pages/payment/play?mode=wepay&type='+( gStore?.wepayInfo?.accountNo?'edit':'add'))">
        <text class="t">{{ gStore?.wepayInfo?.accountNo?"编辑":"添加"}}</text>
        <image src="/static/image/icon-arrow-right.png" class="icon"></image>
      </view>
    </view>
    <view class="pay-mode-hd">
      <view class="icon">
        <image src="/static/image/icon-alipay.png" style="width: 40rpx;height: 40rpx;" />
      </view>
      <text class="name">支付宝收款</text>
    </view>
    <view class="pay-mode-item">
      <template v-if=" gStore?.alipayInfo?.accountNo">
        <text class="name">{{ gStore?.alipayInfo?.accountNo}}({{ gStore.alipayInfo?.name}}）</text>
      </template>
      <template v-else>
        <text class="name"></text>
      </template>
      <view class="arrow" @click="openRoutePath('pages/payment/play?mode=alipay&type='+(gStore.alipayInfo?.accountNo?'edit':'add'))">
        <text class="t">{{gStore.alipayInfo?.accountNo?'编辑':'添加'}}</text>
        <image src="/static/image/icon-arrow-right.png" class="icon"></image>
      </view>
    </view>
    <view class="pay-mode-hd">
      <view class="icon">
        <image src="/static/image/icon-card.png" style="width: 40rpx;height: 30rpx;" />
      </view>
      <text class="name">银行卡收款</text>
    </view>
    <view class="pay-mode-item-card">
      <u-swipe-action>
        <u-swipe-action-item :options="swipeActionOptions" v-for="(item,index) in  cardInfo" :name="index" :key="index" @click="swipeActionclick">
          <view class="pay-mode-item-swipe-action">
            <view class="card-info">
              <text class="name">{{item.bankName }}</text>
              <text class="branch">{{item.branchBank }}</text>
            </view>
            <view class="card-number">
              {{ item.accountNo }} ({{item.name }})
            </view>
          </view>
          <view class="line">
            <view class="u-border-bottom"></view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
      <view class="u-border-bottom"></view>
    </view>
    <view class="pay-mode-add" @click="openRoutePath('pages/payment/card?type=add','card')">
      <view class="w">
        <image src="/static/image/icon-pay-add.png" class="icon"></image>
        <text class="t">添加银行卡</text>
      </view>
    </view>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { globalStore } from "@/store";
const gStore = globalStore();
var swipeActionOptions = ref([
  {
    text: "编辑",
    style: {
      backgroundColor: "#232F3F",
    },
  },
  {
    text: "删除",
    style: {
      backgroundColor: "#FC4D42",
    },
  },
]);
const openRoutePath = (path, type) => {
  if (type === "card") {
    gStore.cardInfo = {};
  }
  uni.navigateTo({
    url: "/" + path,
  });
};
const cardInfo = ref([]);

const getPaymentAccountList = (callback) => {
  uni.$request
    .service({
      url: "/m/receive/account/list",
      method: "GET",
      data: {},
    })
    .then((res) => {
      gStore.alipayInfo = res.find((item) => item.type === 2);
      gStore.wepayInfo = res.find((item) => item.type === 1);
      cardInfo.value = res.filter((item) => item.type === 3);
      callback && callback();
    });
};
getPaymentAccountList();
const swipeActionclick = (res) => {
  // 编辑
  if (!res.index) {
    gStore.cardInfo = cardInfo.value[res.name];
    cardInfo.value[res.name].show = false;
    uni.$u.route({
      url: "pages/payment/card",
      params: { type: "edit" },
    });
  }
  if (res.index === 1) {
    deleteCard(cardInfo.value[res.name]?.id);
  }
};
// 删除银行卡
const deleteCard = (id) => {
  uni.$request
    .service({
      url: "/m/receive/account/delete/" + id,
      method: "POST",
      data: {
        type: 3,
      },
    })
    .then((res) => {
      getPaymentAccountList(() => {
        uni.$u.toast("删除成功");
      });
    });
};
uni.$on("payBack", () => {
  getPaymentAccountList();
});
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.pay-mode-hd {
  display: flex;
  padding: 30rpx 40rpx;
  .icon {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
  }
  .name {
    color: #232f3f;
    font-size: 32rpx;
  }
}
.pay-mode-item {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 35rpx 40rpx;
  .name {
    color: #232f3f;
    font-size: 32rpx;
    color: #232f3f;
    font-style: normal;
    font-weight: 500;
  }
  .arrow {
    display: flex;
    align-items: center;
    .t {
      font-size: 28rpx;
      color: #9eb0c5;
    }
    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-left: 6rpx;
    }
  }
}
.u-demo-block__title {
  padding: 10px 0 2px 15px;
}
.pay-mode-item-swipe-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 40rpx;
  .card-info {
    display: flex;
    flex-direction: column;
    .name {
      font-size: 32rpx;
      color: #232f3f;
    }
    .branch {
      padding-top: 8rpx;
      font-size: 24rpx;
      color: #9eb0c5;
    }
  }
  .card-number {
    font-size: 28rpx;
    color: #232f3f;
  }
}
.line {
  padding: 0 38rpx;
}
.pay-mode-add {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
  background-color: #fff;
  .w {
    display: flex;
    align-items: center;
    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 12rpx;
    }
    .t {
      font-size: 32rpx;
      color: #232f3f;
    }
  }
}
</style>
